<div class="d-flex align-items-center justify-content-between user-select-none">
  @if (showPageable) {
    @if (pageable) {
      <nav aria-label="Page navigation items">
        <ul class="pagination mb-0">
          @if (showBackBtn) {
            <li class="page-item">
              <a
                class="page-link border-end-0"
                href=""
                (click)="onClickBackBtn($event)"
              >
                <i class="bi bi-chevron-double-left"></i>
              </a>
            </li>
          }

          <li class="page-item">
            <a
              class="page-link border-end-0"
              [class.disabled]="!pageable.previous"
              href=""
              (click)="onClickPreviousPage($event)"
            >
              <i class="bi bi-chevron-left"></i>
            </a>
          </li>
          <li class="page-item">
            <a
              class="page-link border-start-0 border-end-0 cursor-default"
              [class.disabled]="showBackBtn"
              href=""
              (click)="onClickPage($event)"
            >
              @if (
                pageable.currentPageSize &&
                pageable.currentPageSize > 0 &&
                pageable.currentPageSize !== pageable.size
              ) {
                {{ pageable.page + 1 }}-{{ pageable.currentPageSize }}
              } @else {
                {{ pageable.page + 1 }}
              }
            </a>
          </li>
          <li class="page-item">
            <a
              class="page-link border-start-0"
              [class.disabled]="!pageable.next"
              href=""
              (click)="onClickNextPage($event)"
            >
              <i class="bi bi-chevron-right"></i>
            </a>
          </li>

          @if (showXBtn) {
            <li class="page-item">
              <a
                class="page-link border-start-0"
                href=""
                (click)="onClickXBtn($event)"
              >
                <i class="bi bi-x-lg"></i>
              </a>
            </li>
          }
        </ul>
      </nav>
    } @else {
      <nav></nav>
    }
  } @else {
    <nav></nav>
  }

  <div class="dropup align-self-center">
    <button
      class="btn btn-outline-secondary border-0"
      type="button"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <i class="bi bi-list"></i>
    </button>

    <ul class="dropdown-menu">
      @if (globalState().isLogin) {
        <li>
          <a class="dropdown-item" routerLink="/users"
            ><i class="bi bi-person me-2"></i>My Profile</a
          >
        </li>
        <li class="dropdown-divider"></li>
        <li>
          <a
            class="dropdown-item link-danger"
            href=""
            (click)="onClickLogout($event)"
            ><i class="bi bi-box-arrow-right me-2"></i><span>Logout</span></a
          >
        </li>
      } @else {
        <li>
          <a class="dropdown-item" href="" (click)="onClickLogin(true, $event)"
            ><i class="bi bi-person me-2"></i>Login Now</a
          >
        </li>
        <li>
          <a class="dropdown-item" href="" (click)="onClickLogin(false, $event)"
            ><i class="bi bi-person-add me-2"></i>Quick Register</a
          >
        </li>
      }
    </ul>
  </div>
</div>

<app-modal #modal [customLayout]="true" [sm]="true">
  <div class="modal-body" ngProjectAs="modal-content">
    <app-login
      [showLoginPage]="showLoginPage"
      (closeEvent)="onCloseEventLogin()"
    ></app-login>
  </div>
</app-modal>
